<template>
	<view>
		<view class="ordering">
			<block v-for="(item,i) in tabsList" :key='i'>
				<text@click="slectTab(i)" :class="{active:i==num}">{{item}}</text>
			</block>
		</view>


		<view class="">
			<MenuRight :class="[selectActive===0?'dis_block':'dis_none']" />
			<Assess :class="[selectActive===1?'dis_block':'dis_none']" />
			<Introduce :class="[selectActive===2?'dis_block':'dis_none']" />
		</view>
	</view>
</template>

<script>
	import MenuRight from './menu_right.vue'
	import Assess from './assess.vue'
	import Introduce from './introduce.vue'
	import {
		discuss,

		getdishes
	} from '../../../api/api/forshop.js'
	export default {
		components: {
			MenuRight,
			Assess,
			Introduce
		},

		data() {
			return {
				tabsList: ['点菜', '评价', '商家'],
				num: 0,
				selectActive: 0,
				// discuss: [],
				// getdishes: [],
			}
		},
		mounted() {

		},
		methods: {
			slectTab(i) {
				this.num = i
				this.selectActive = i
			},

		}
	}
</script>

<style scoped lang="scss">
	.ordering {
		margin: 20upx;
		display: flex;

		text {
			margin-right: 60upx;
			display: block;
			height: 60upx;
			line-height: 60upx;
			font-size: 33upx;
			color: #666666;

		}
	}

	.active {
		color: #333333 !important;
		font-weight: bold !important;
		border-bottom: 5upx solid #ffd161;
	}

	.dis_block {
		display: block;
	}

	.dis_none {
		display: none;
	}
</style>
